<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!--  引入echarts的js文件  -->
<script src="/merAccess/static/js/echarts.js"></script>
<!--  引入jquery的js文件  -->
<script src="/merAccess/static/js/jquery-3.3.1.js"></script>

<!--  屏幕适配、覆盖web默认样式css  -->
<link rel="stylesheet" href="/merAccess/static/css/umf.css" />

<!--  公共样式css  -->
<link rel="stylesheet" href="/merAccess/static/css/shfwpt.css" />
<!--  页面样式css  -->
<style type="text/css">
html, body {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #fff;
}

a {
	color: #333;
}

p {
	font-weight: 400;
}

.header {
	width: 90%;
	margin: .5rem 0;
	height: auto;
}

h1 {
	font-size: 1.5rem;
	margin: .5rem 0 0 0;
}

h2 {
	font-size: 1rem;
	font-weight: 400;
	margin: .2rem 0;padding: 0;
	word-break: keep-all;
	white-space: nowrap;
}

h3 {
	font-size: .75rem;
	font-weight: 400;
	line-height: 24px;
	word-break: keep-all;
	white-space: nowrap;
	padding: 0; margin-top:5px 0 0 0;
}

h4 {
	font-size: .8rem;
	font-weight: 400;
	line-height: 50px;
	padding: 0;
}

.line {
	width: 5px;
	display: inline-block;
	height: 16px;
	background: #e60033;
	margin-right: 10px;
}

.content {
	width: 90%;
	padding: 0 5%;
	height: 3rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
}

.content_1 {
	width: 31%;
	padding: 5px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fff;
	font-size: .8rem;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #e60033;
}

.content_1 p {
	margin: 0;
	font-size: .75rem;
}

.main {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: left;
	margin: .5rem 0 0 0; padding:0;
	border-bottom: 1px solid #d9d9d9;
}

.main2 {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: left;
	margin:0 0 0 0;padding:0;
}

.main2 ul {
	width:100%;
	margin: 5px 0;
	padding:0;
	word-break: keep-all;
	white-space: nowrap;
}
 .main2 li {
	width: 100%;
	font-size: .75rem;
	text-align: left;
	color: #757575;
	padding:0;
	margin:0;
} 

.red {
	color: #e60033
}

.titlelist {
	width: 100%;
	clear: both;
}

.titlelist  a {
	display: block;
	line-height: 2rem;
}

.dzz-ul-big-tab{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	border-top: 1px solid #f4f4f4;
	border-bottom: 1px solid #d9d9d9;
	clear: both; margin:0;padding:0;
}
.dzz-ul-big-tab li{
	width: 33.33%;
	height:2rem; 
	line-height:2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size:.75rem; 
	text-align:center;
}
.content_2 {
	width: 33.33%;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: .75rem;
	text-align: center;
}

.current {
	color: #e60033;
	border-bottom: 3px solid #e60033;
}

.dzz-tab-div2 {
	height:300px;
	width:90%;
	margin:0 auto;
}
.dzz-tab-div3 {
	height:300px;
	width:90%;
	margin:0 auto;
}

</style>
</head>

<body>
	<!-- <div class="header">
		<img src="/merAccess/static/images/logo.png" width="140" />
	</div> -->
	<h1>链金平台业务日报</h1>
	<div style="font-size: .8rem; margin: .5rem 0 .8rem 0;">行业产品技术部</div>
	<div  style="height:360px;width:100%;margin:0;padding:0; ">
		<ul class="dzz-ul-big-tab">
				<li class="current">近一周</li>
				<li>近一个月</li>
				<li>近三个月</li>
		</ul>
		<div class="dzz-tab-div1" id="homepageEchart" style=" height:300px; width:90%; margin:0 auto"></div>
		<div class="dzz-tab-div2" id="homepageEchartOneMonth" style="height:300px; width:90%; margin:0 auto;display:none; "></div>
		<div class="dzz-tab-div3" id="homepageEchartThreeMonth" style="height:300px; width:90%; margin:0 auto;display:none; "></div>
	</div>

	<div
		style="font-size: 0; height: 8px; background: #eee; border-bottom: 1px solid #d9d9d9; width: 100%;"></div>
	<h4>今日业务交易</h4>
	<div class="content">
		<div class="content_1 ">
			<p>交易平台</p>
			<p style="margin-top: .3rem;">
				<span th:text="${platNumber}"></span>个
			</p>
		</div>
		<div class="content_1 ">
			<p>交易笔数</p>
			<p style="margin-top: .3rem;">
				<span th:text="${totalRecorders}"></span>笔
			</p>
		</div>
		<div class="content_1 ">
			<p>交易金额</p>
			<p style="margin-top: .3rem;">
				<span th:text="${totalAmt}"></span>元
			</p>
		</div>
	</div>

	<div th:if="${not #lists.isEmpty(resultMerIdList)}"
		style="text-align: left; width: 90%; margin: 0 auto;">

		<div th:each="entries:${resultMerIdList}"
			style="text-align: left; width: 100%;">
			<div class="main">
				<h2>
					<span class="line"></span><span th:text="${entries.merName}"></span>
				</h2>
				<h3>
					交易总金额：<span class="red" th:text="${entries.totalAmtStr}"></span>元，<span
						class="red" th:text="${entries.totoalRecods}"></span>笔
				</h3>

				<div th:if="${#lists.size(resultPayTypeList)}>0">
					<div style="margin:0;padding:0;" th:each="payTypeEntries:${resultPayTypeList}">
						<div class="main2" th:if=" ${entries.merId == payTypeEntries.merId }">
							<ul  th:if=" ${payTypeEntries.payType != '' }">
								<li th:if=" ${payTypeEntries.payType == 'wechat' } ">微信支付：<span
									th:text="${payTypeEntries.totalAmtStr}"></span>元，<span
									th:text="${payTypeEntries.totoalRecods}"></span>笔
								</li>
								<li th:if=" ${payTypeEntries.payType == 'al'} ">支付宝支付：<span
									th:text="${payTypeEntries.totalAmtStr}"></span>元，<span
									th:text="${payTypeEntries.totoalRecods}"></span>笔
								</li>
								<li th:if=" ${payTypeEntries.payType == 'bankCard' } ">银行卡支付：<span
									th:text="${payTypeEntries.totalAmtStr}"></span>元，<span
									th:text="${payTypeEntries.totoalRecods}"></span>笔
								</li>
								<li th:if=" ${payTypeEntries.payType == 'balance' } ">余额支付：<span
									th:text="${payTypeEntries.totalAmtStr}"></span>元，<span
									th:text="${payTypeEntries.totoalRecods}"></span>笔
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div style="font-size: .65rem; margin: .5rem 0 2rem 0; color: #999;">行业产品技术部</div>

<script type="text/javascript">
	$(".dzz-ul-big-tab li").on("click",function(){
        $(".dzz-ul-big-tab li").removeClass("current");
        $(this).addClass("current");
        if($(this).index()=="0")
        {
          $(".dzz-tab-div1").show();
          $(".dzz-tab-div2").hide();
          $(".dzz-tab-div3").hide();
        }
        else if($(this).index()=="1"){
        //document.getElementById("homepageEchartOneMonth").style.display=""; 
        //$(".dzz-tab-div2").attr("visibility","visible");
           //$(".dzz-tab-div2").css("display","block");
           //$(".dzz-tab-div2").css("width","90%");
           $(".dzz-tab-div2").show(); 
           $(".dzz-tab-div1").hide(); 
           $(".dzz-tab-div3").hide();
          
        }else{
        //document.getElementById("homepageEchartThreeMonth").style.display=""; 
        //$(".dzz-tab-div3").attr("visibility","visible");
            //$(".dzz-tab-div3").css("display","block");
            //$(".dzz-tab-div3").css("width","90%");
        	$(".dzz-tab-div3").show(); 
            $(".dzz-tab-div1").hide(); 
            $(".dzz-tab-div2").hide();
        }
    })
</script>

<script type="text/javascript" th:inline="javascript" >
/*<![CDATA[*/
var dom = document.getElementById("homepageEchart");
var homepageEchart = echarts.init(dom);
var amount1  = [];
var records1  = [];
var echartsDate1  = [];
var amount1=[[${oneWeekAmt}]];
var records1=[[${oneWeekRecords}]];
var echartsDate1=[[${oneWeekDate}]];
function calMax(arr) {
	var max = arr[0];
	for ( var i = 1; i < arr.length; i++) {// 求出一组数组中的最大值
		if (max < arr[i]) {
			max = arr[i];
		}
	}
	var maxint = Math.ceil(max / 10);// 向上取整
	var maxval = maxint * 10;// 最终设置的最大值
	return maxval;// 输出最大值
}
var maxAmt = calMax(amount1);//金额Y轴值
var maxRecords = calMax(records1);//笔数Y轴值

option = null;
option = { 
	tooltip: {
	    trigger: 'axis'
	},
	 grid : {
         left: 50,    //距离容器左边界40像素
         right: 50   //距离容器右边界30像素
     },
	xAxis: {
	    axisLabel: {
	    	interval: 0,
	    },
	    type: 'category',
	    name: '时间',
	    boundaryGap: false,
	    data: echartsDate1,
	},
	yAxis: [{
	    name: '金额/元',
	    type: 'value',
	    axisTick: {
	             inside: true
	         },
	    min: 0,
        max: maxAmt,        
        interval: Math.ceil(maxAmt / 5),
	    axisLabel: {
	    	interval:5,
			 margin: 2,
			 formatter: function (value) {
				 if (value >= 10000 && value < 10000000) {
					 value = (value / 10000).toFixed(1) + "万";
				 } else if (value >= 10000000 && value < 100000000) {
					 value = (value / 10000000 ).toFixed(1) + "千万";
				 }else if (value >= 100000000) {
					 value = (value / 100000000).toFixed(1) + "亿";
				 }
				 return value;
			 }
		    	 } 
	}, {
	    name: '笔数/笔',
	    type: 'value',
	    interval:5,
	    axisTick: {
	             inside: true
	         },
	    min: 0,
        max: maxRecords,        
        interval: Math.ceil(maxRecords / 5),
        axisLabel: {
            interval:5,
            margin: 2,
            formatter: function (value) {
                if (value < 100000) {
                    value = (value+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
                } else if (value >= 100000 && value < 10000000) {
                    value = (value / 10000).toFixed(1) + "万";
                } else if (value >= 10000000 && value < 100000000) {
                    value = (value / 10000000 ).toFixed(1) + "千万";
                }else if (value >= 100000000) {
                    value = (value / 100000000).toFixed(1) + "亿";
                }
                return value;
            }
         } 
	}],
	series: [{
	    name: '笔数',
	    type: 'line',
	    yAxisIndex: 1,
	    data: records1,
	}, {
	    name: '金额',
	    type: 'line',
	    data: amount1,
	}]
};
// 使用刚指定的配置项和数据显示图表
if (option && typeof option === "object") {
	homepageEchart.setOption(option, true);
}
/*]]>*/
</script>
<script type="text/javascript" th:inline="javascript" >
/*<![CDATA[*/
//设置style宽度 长度 不然echarts无法获取，
$(".dzz-tab-div2").width($(".dzz-tab-div2").width());
$(".dzz-tab-div2").height($(".dzz-tab-div2").height());
var domOneMonth = document.getElementById("homepageEchartOneMonth","light");
var homepageEchartOneMonth = echarts.init(domOneMonth);
var amount2  = [];
var records2  = [];
var echartsDate2  = [];
var amount2=[[${oneMontAmt}]];
var records2=[[${oneMontRecords}]];
var echartsDate2=[[${oneMonthDate}]];
function calMax(arr) {
	var max = arr[0];
	for ( var i = 1; i < arr.length; i++) {// 求出一组数组中的最大值
		if (max < arr[i]) {
			max = arr[i];
		}
	}
	var maxint = Math.ceil(max / 10);// 向上取整
	var maxval = maxint * 10;// 最终设置的最大值
	return maxval;// 输出最大值
}
var maxAmt = calMax(amount2);//金额Y轴值
var maxRecords = calMax(records2);//笔数Y轴值

optionOneMonth = null;
optionOneMonth = { 
	tooltip: {
	    trigger: 'axis'
	},
	grid : {
        left: 50,    //距离容器左边界40像素
        right: 50   //距离容器右边界30像素
    },
	xAxis: {
	    type: 'category',
	    name: '时间',
	    boundaryGap: false,
	    data: echartsDate2,
	},
	yAxis: [{
	    name: '金额/元',
	    type: 'value',
	    axisTick: {
	             inside: true
	         },
	    min: 0,
        max: maxAmt,        
        interval: Math.ceil(maxAmt / 5),
	    axisLabel: {
	    	 interval:5,
			 margin: 2,
			 formatter: function (value) {
				 if (value >= 10000 && value < 10000000) {
					 value = (value / 10000).toFixed(1) + "万";
				 } else if (value >= 10000000 && value < 100000000) {
					 value = (value / 10000000 ).toFixed(1) + "千万";
				 }else if (value >= 100000000) {
					 value = (value / 100000000).toFixed(1) + "亿";
				 }
				 return value;
			 }
		    	 } 
	}, {
	    name: '笔数/笔',
	    type: 'value',
	    interval:5,
	    axisTick: {
	             inside: true
	         },
	    min: 0,
        max: maxRecords,        
        interval: Math.ceil(maxRecords / 5),
        axisLabel: {
            interval:5,
            margin: 2,
            formatter: function (value) {
            	if (value < 100000) {
                    value = (value+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
                } else if (value >= 100000 && value < 10000000) {
                    value = (value / 10000).toFixed(1) + "万";
                } else if (value >= 10000000 && value < 100000000) {
                    value = (value / 10000000 ).toFixed(1) + "千万";
                }else if (value >= 100000000) {
                    value = (value / 100000000).toFixed(1) + "亿";
                }
                return value;
            }
         } 
	}],
	series: [{
	    name: '笔数',
	    type: 'line',
	    axisTick: {
	             inside: true
	         },
	    yAxisIndex: 1,
	    data: records2,
	}, {
	    name: '金额',
	    type: 'line',
	    data: amount2,
	}]
};
// 使用刚指定的配置项和数据显示图表
if (optionOneMonth && typeof optionOneMonth === "object") {
	homepageEchartOneMonth.setOption(optionOneMonth, true);
}
/*]]>*/
</script>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
	//设置style宽度 长度 不然echarts无法获取，
$(".dzz-tab-div3").width($(".dzz-tab-div3").width());
$(".dzz-tab-div3").height($(".dzz-tab-div3").height());
var domThreeMonth = document.getElementById("homepageEchartThreeMonth","light");
var homepageEchartThreeMonth = echarts.init(domThreeMonth);
var amount3  = [];
var records3  = [];
var echartsDate3  = [];
var amount3=[[${threeMonthAmt}]];
var records3=[[${threeMonthRecords}]];
var echartsDate3=[[${threeMonthDate}]];
function calMax(arr) {
	var max = arr[0];
	for ( var i = 1; i < arr.length; i++) {// 求出一组数组中的最大值
		if (max < arr[i]) {
			max = arr[i];
		}
	}
	var maxint = Math.ceil(max / 10);// 向上取整
	var maxval = maxint * 10;// 最终设置的最大值
	return maxval;// 输出最大值
}
var maxAmt = calMax(amount3);//金额Y轴值
var maxRecords = calMax(records3);//笔数Y轴值

optionThreeMonth = null;
optionThreeMonth = { 
	tooltip: {
	    trigger: 'axis'
	},
	grid : {
        left: 50,    //距离容器左边界40像素
        right: 50   //距离容器右边界30像素
    },
	xAxis: {
	    type: 'category',
	    name: '时间',
	    boundaryGap: false,
	    data: echartsDate3,
	},
	yAxis: [{
	    name: '金额/元',
	    type: 'value',
	    axisTick: {
	             inside: true
	         },
	    min: 0,
        max: maxAmt,        
        interval: Math.ceil(maxAmt / 5),
	    axisLabel: {
	    	interval:5,
			 margin: 2,
			 formatter: function (value) {
				 if (value >= 10000 && value < 10000000) {
					 value = (value / 10000).toFixed(1) + "万";
				 } else if (value >= 10000000 && value < 100000000) {
					 value = (value / 10000000 ).toFixed(1) + "千万";
				 }else if (value >= 100000000) {
					 value = (value / 100000000).toFixed(1) + "亿";
				 }
				 return value;
			 }
		    	 } 
	}, {
	    name: '笔数/笔',
	    type: 'value',
	    interval:5,
	    axisTick: {
	             inside: true
	         },
	    min: 0,
        max: maxRecords,        
        interval: Math.ceil(maxRecords / 5),
        axisLabel: {
            interval:5,
            margin: 2,
            formatter: function (value) {
            	if (value < 100000) {
                    value = (value+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
                } else if (value >= 100000 && value < 10000000) {
                    value = (value / 10000).toFixed(1) + "万";
                } else if (value >= 10000000 && value < 100000000) {
                    value = (value / 10000000 ).toFixed(1) + "千万";
                }else if (value >= 100000000) {
                    value = (value / 100000000).toFixed(1) + "亿";
                }
                return value;
            }
         } 
	}],
	series: [{
	    name: '笔数',
	    type: 'line',
	    yAxisIndex: 1,
	    data: records3,
	}, {
	    name: '金额',
	    type: 'line',
	    data: amount3,
	}]
};
// 使用刚指定的配置项和数据显示图表
if (optionThreeMonth && typeof optionThreeMonth === "object") {
	homepageEchartThreeMonth.setOption(optionThreeMonth, true);
}
/*]]>*/
</script>
</body>
</html>
